<script setup lang="ts">
import type { Props } from './utils/types'

defineProps<Props>()

const $emit = defineEmits(['onChange'])

const activeIndex = shallowRef<number>(0)

function handleChangeTab(item: any, index: number) {
    activeIndex.value = index
    $emit('onChange', item)
}

</script>

<template>
    <div class="tabs">
        <div class="tab" :class="{ active: index == activeIndex }" v-for="(item, index) in list" :key="index"
            @click="handleChangeTab(item, index)">
            {{ item.label }}
        </div>
    </div>
</template>

<style lang="scss" scoped>
.tabs {
    display: flex;
    justify-content: center;

    .tab {
        margin: 0 20px;
        color: #9A9A9A;
        cursor: pointer;
        padding-bottom: 5px;
    }

    .active {
        color: var(--primary-color);
        border-bottom: 2px solid var(--primary-color);
    }
}
</style>
